// 个人详细页面
<template>
  <div class="app-container">
    <div style="margin-bottom:10px">
      <el-tag type="warning">账号:{{username}},等级:{{level}}</el-tag>
      <el-tag type="warning">快开:初始{{qk_init_amount}},剩余:{{qk_remaining_amount}}</el-tag>
      <el-tag type="warning">香港:初始{{hk_init_amount}},剩余:{{hk_remaining_amount}}</el-tag>
    </div>
    <el-tabs type="border-card" v-model="tabName" v-if="level!='庄家' && commissions" @tab-click="handleGameTableClick">
      <el-tab-pane v-for="(item) in games" :key="`gameid${item.entity_id}`" :name="item.game_code" :label="item.name">
        <el-table :data="list" v-loading="loading" key="selfCommissionTable" element-loading-text="加载中" header-cell-class-name='tableHeader' border fit>
          <!-- <el-table-column type="index" label="#" align="center" min-width="35">
          </el-table-column> -->
          <el-table-column prop="item_name" label="玩法" align="center" min-width="80">
            <template slot-scope="scope"> {{scope.row.item_name}}</template>
          </el-table-column>
          <el-table-column prop="a_commission" label="A盘退水" align="center" min-width="80">
            <template slot-scope="scope"> {{scope.row.a_commission|formatFloat}}%</template>
          </el-table-column>
          <el-table-column prop="b_commission" label="B盘退水" align="center" min-width="80">
            <template slot-scope="scope"> {{scope.row.b_commission|formatFloat}}%</template>
          </el-table-column>
          <el-table-column prop="c_commission" label="C盘退水" align="center" min-width="80">
            <template slot-scope="scope"> {{scope.row.c_commission|formatFloat}}%</template>
          </el-table-column>
          <el-table-column prop="d_commission" label="D盘退水" align="center" min-width="80">
            <template slot-scope="scope"> {{scope.row.d_commission|formatFloat}}%</template>
          </el-table-column>
          <el-table-column prop="order_min_amount" label="单注最低" align="center" min-width="80">
            <template slot-scope="scope"> {{scope.row.order_min_amount|formatFloat}}%</template>
          </el-table-column>
          <el-table-column prop="order_max_amount" label="单注最高" align="center" min-width="80">
            <template slot-scope="scope"> {{scope.row.order_max_amount|formatFloat}}%</template>
          </el-table-column>
          <el-table-column prop="period_max_amount" label="单期限额" align="center" min-width="80">
            <template slot-scope="scope"> {{scope.row.period_max_amount|formatFloat}}%</template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { formatFloat } from '@/utils/index'

export default {
  name: 'profileCredit', // 用户信息页
  data() {
    return {
      username: null,
      level: null, // 用户级别
      qk_init_amount: null, // 快开初始额度
      qk_remaining_amount: null, // 快开剩余额度
      hk_init_amount: null, // 香港
      hk_remaining_amount: null,
      list: null,
      commissions: null, // table 数据
      commissionsLoading: false,
      loading: false,
      tabName: null, // 默认的tab
    }
  },
  filters: {
    formatFloat: formatFloat, // 格式化保留两位小数,
  },
  created() {
    // console.log(formatFloat(2342423, 0));
    this.fetchCreditInfo()
  },
  computed: { ...mapGetters(['info', 'games']) },

  methods: {
    // 获取个人信用信息
    fetchCreditInfo() {
      this.loading = true
      this.$store.dispatch('GetCreditInfo', {}).then(response => {
        this.loading = false
        if (response && response.amounts) {
          this.username = response.amounts.username
          this.level = response.amounts.level
          this.qk_init_amount = response.amounts.qk_init_amount
          this.qk_remaining_amount = response.amounts.qk_remaining_amount
          this.hk_init_amount = response.amounts.hk_init_amount
          this.hk_remaining_amount = response.amounts.hk_remaining_amount
        }
        if (response && response.commission.length > 0) {
          // 庄家没有commission返回
          this.commissions = response.commission
          this.fetchGames()
        }
      })
    },

    // tab change
    handleGameTableClick(tab) {
      // 根据不同的tab获取不同的game detail
      if (this.commissions) {
        this.list = Object.values(this.commissions[tab.name])
      }
    },
  },
}
</script>

<style>

</style>
